<template>
  <div :class="`${showMobilePage? isDiySelectSupplier && process === 0? 'mobile-create' : 'mobile-settle-info' : ''}`" class="supplier-settle-info">
    <div class="supplier-title">
      <Title title="结算信息" style="margin: 0 0px 15px 0px;" />
      <div v-if="isInvite && [0, 5].includes(processStatus) && !isDetail" class="supplier-tips">注意：无法选择需要结算的订单可以在【付款申请】时邀请他人填写。</div>
    </div>
    <el-form
      :class="{'mobile-el-form': showMobilePage, 'el-form-dividing': !showMobilePage, 'gray-label': !(isDiySelectSupplier && process === 0)}"
      :label-width="showMobilePage?'100px':'110px'"
      :label-position="showMobilePage?'left':'right'">
      <el-form-item label="审批单号：" style="margin-bottom: 0;">
        <ToolTip :content="approvalNo" />
      </el-form-item>
      <el-row :gutter="8" class="supplier-info-box">
        <el-col v-if="isDiySelectSupplier && process === 0" :span="colSpan" class="supplier-info-item">
          <el-form-item label="供应商来源" class="isRequired mobile-create-item" style="margin-bottom: 0px;">
            <selectWithoutHttp
              v-model="pageFrom"
              :list-data="pageFromOptions"
              key-name="id"
              label-name="name"
              @change="pageFromChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="colSpan" class="supplier-info-item">
          <el-form-item :label="`供应商名称${isDiySelectSupplier && process === 0?'':'：'}`" class="isRequired" style="margin-bottom: 0px;">
            <!-- 自选供应商 -->
            <div v-if="isDiySelectSupplier && process === 0">
              <SelectWithUserLoad
                v-if="resetPageFrom"
                v-model="supplierId"
                :loadmore-method="getSupplier()"
                :hide-select-list="supplierId?[{id: supplierId, supplier:supplierData.supplier}]:[]"
                :collapse-tags="false"
                :add-new="false"
                open-tool-tip
                key-name="id"
                label-name="supplier"
                filterable
                class="width240"
                add-new-str="添加新供应商"
                @change="supplierChange($event,true)"
                @addNewClick="toCreateSupplier"
              />
            </div>
            <ToolTip v-else :content="supplierData.supplier" />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="colSpan" class="supplier-info-item">
          <el-form-item label="所属部门：" style="margin-bottom: 0px;">
            <span class="content">{{ supplierData.departmentName || '--' }}</span>
          </el-form-item>
        </el-col> -->
        <el-col v-if="process !== 0" :span="colSpan" class="supplier-info-item">
          <el-form-item label="成本来源：" style="margin-bottom: 0px;">
            <span v-if="!isNotOrder" class="content">{{ `${supplierCostBelong(supplierData.costBelong)}${isInvite ? '(协作)' : ''}` }}</span>
            <span v-else class="content">非订单</span>
          </el-form-item>
        </el-col>
        <el-col v-if="process === 2 || process === 4" :span="colSpan" class="supplier-info-item">
          <el-form-item label="创建人：" style="margin-bottom: 0px;">
            <!-- <span v-if="supplierData.createUser" class="content">{{ supplierData.createUser }}</span>
            <span v-else>--</span> -->
            <CheckUserInfo v-if="supplierData.createUser" :label="supplierData.createUser" :user-id="supplierData.creatorId" />
            <div v-else>--</div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <CreatePageDialog ref="CreatePageDialogRef" :supplier-source="pageFromMap(pageFrom)" component="supplier" @update="update" />
  </div>
</template>
<script>
import { mapState } from 'vuex';
import Title from '@/components/Title';
import { moneyFilter } from '@/filters/number';
import { supplierCostBelong } from '@/filters/status';
import { supplierManageList } from '@/api/supplier';
import { getMengliSuppliers } from '@/api/mengli';
import SelectWithUserLoad from '@/components/Common/selectWithUserLoad';
import SelectWithoutHttp from '@/components/Common/selectWithoutHttp';
import CreatePageDialog from '@/components/Common/createPageDialog';
export default {
  components: { Title, SelectWithUserLoad, SelectWithoutHttp, CreatePageDialog },
  filters: { moneyFilter },
  props: {
    costBelong: {
      type: Number,
      default: 0
    },
    supplierData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    process: {
      type: String | Number,
      default: null
    },
    isDiySelectSupplier: { // 是否自选供应商
      type: Boolean,
      default: false
    },
    isNotOrder: { // 是否为非订单请款
      type: Boolean,
      default: false
    },
    processStatus: {
      type: Number,
      default: 0
    },
    approvalNo: {
      type: String | Number,
      default: ''
    }
  },
  data() {
    return {
      supplierId: '',
      pageFrom: 'saleSupplier', // 来源
      resetPageFrom: true,
      pageFromOptions: [
        { id: 'saleSupplier', name: '飞博供应商' },
        { id: 'mengliSupplier', name: '萌力供应商' }
      ]
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    colSpan() {
      // if (this.process === 0 || this.process === 1) {
      //   return 8;
      // }
      return 8;
    },
    isInvite() {
      return !!this.$route.query.isInvite;
    },
    isDetail() {
      return this.$route.name === 'supplierDetail';
    }
  },
  created() {
    if (this.isDiySelectSupplier) {
      const pageFrom = localStorage.getItem('supplierPageFrom');
      if (pageFrom) this.pageFrom = pageFrom;
    }
  },
  methods: {
    supplierCostBelong,
    getSupplier() {
      const pageFrom = this.pageFrom;
      const a = function(params) {
        return new Promise((resolve, reject) => {
          params.supplier = '';
          params.keyword = '';
          if (params.userName) {
            if (pageFrom === 'saleSupplier') {
              params.supplier = params.userName;
            } else {
              params.keyword = params.userName;
            }
          }
          const getFun = pageFrom === 'saleSupplier' ? supplierManageList : getMengliSuppliers;
          getFun(params).then(res => {
            resolve(res);
          }).catch(err => {
            reject(err);
          });
        });
      };
      return a;
    },
    supplierChange(id, clearCache = false) {
      this.$emit('setSupplierId', id, this.pageFrom);
      clearCache && this.$emit('clearCache');// 切换供应商时清除上次的选择缓存
    },
    initSupplierId(id) {
      setTimeout(() => {
        this.supplierId = id;
        this.supplierChange(id);
      }, 0);
    },
    pageFromMap(pageFrom = 'saleSupplier') {
      const pageFromMap = {
        'saleSupplier': 0,
        'mengliSupplier': 2,
        'commerceSupplier': 6
      };
      return pageFromMap[pageFrom];
    },
    pageFromChange() {
      this.supplierId = '';
      this.$emit('setSupplierId', 0, this.pageFrom);
      this.resetPageFrom = false;
      this.$nextTick(() => {
        this.resetPageFrom = true;
      });
    },
    addNewClick() {
      this.$refs.CreatePageDialogRef.open();
    },
    update(data) {
      if (data.id) {
        this.supplierId = data.id;
        this.supplierChange(data.id);
      }
    },
    toCreateSupplier() {
      const routeUrl = this.$router.resolve({
        name: 'supplierManage',
        query: {
          toCreate: 1
        }
      });
      window.open(routeUrl.href, '_blank');
    }
  }
};
</script>
<style lang="scss" scoped>
.supplier-settle-info {
  margin-top: 16px;
  .supplier-info-box {
    .supplier-info-item {
      & ::v-deep {
        .el-form-item__label {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666;
          line-height: 30px;
        }
        .el-form-item__content {
          line-height: 30px;
        }
      }
      .content {
        font-size: 14px;
        color: #333333;
        // width: 50px;
      }
    }
  }
  .supplier-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    &::v-deep {
      .title-head {
        flex: unset;
      }
    }
    .supplier-tips {
      font-size: 12px;
      color: #999;
      margin: 0 0 14px 10px;
    }
  }
  .width240 {
    ::v-deep {
      .el-select {
        width: 240px;
        .el-input__inner {
          width: 240px;
        }
      }
    }
  }
}
.mobile-create {
  margin: 12px 12px 22px !important;
  .supplier-title {
    flex-wrap: wrap;
  }
  .mobile-create-item {
    margin-bottom: 12px !important;
  }
}
.mobile-settle-info {
  padding: 0 !important;
}
.gray-label {
  ::v-deep .el-form-item__label {
    color: #999999 !important;
  }
}
</style>
